<!DOCTYPE html>
<html>
<head>
    <title>预订房间</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
<div data-role="page">
    <script type="text/javascript">
        function orderCreate() {
            var tempParent = this;
            var hno = $("#number-hno").val();
            var days = $("#number-hdays").val();
            var starttime = $("#date").val();
            if (hno == "" ||
                    days == "" ||
                    starttime == "") {
                Custom.alertMessage(tempParent, "预订房间信息填写不全");
                return;
            }
            var url = "order/create?hno=" + hno + "&days=" + days + "&starttime=" + starttime;
            console.info(url);
            Custom.request(tempParent, url,
                    function (data, textStatus) {
                        if (data == null) {
                            Custom.alertMessage(tempParent, "预订房间出错");
                        } else {
                            Custom.alertMessage(tempParent, "预订房间成功");
                        }
                    });
        }
    </script>
    <div data-role="header">
        <h2>预订房间</h2>
    </div>
    <!-- /header -->
    <div data-role="content">
        <form>
            <label for="number-hno">房间号:</label>
            <input type="number" name="number" pattern="[0-9]*" id="number-hno" value="">
            <label for="number-hdays">入住天数:</label>
            <input type="number" name="number" pattern="[0-9]*" id="number-hdays" value="">
            <label for="date">入住日期:</label>
            <input type="date" name="date" id="date" value="">

            <div style="text-align: right;">
                <input type="reset" data-inline="true" value="重置"/>
                <input type="button" data-inline="true" onclick="orderCreate()" value="提交">
            </div>
        </form>
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a onclick="changeHousePage()" data-iconpos="top" data-icon="home">房间浏览</a></li>
                <li><a href="#" class="ui-btn-active ui-state-persist" data-iconpos="top"
                       data-multiview="true" data-icon="eye">预订房间</a></li>
                <li><a onclick="changeBroweOrderPage()" data-iconpos="top" data-multiview="true" data-icon="search">浏览订单</a></li>
                <li><a onclick="changeMorePage()" data-iconpos="top" data-icon="tag">更多</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>